<template>
    <div>
        <!--轮播图-->
        <div class="roasting">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <a class="swiper-slide" v-for="img in swiperImg">
                        <img :src="url(img.img.url,'0x480')" alt="" width="100%">
                    </a>
                    <!--<a class="swiper-slide"><img src="../images/banner2.jpg" alt="" width="100%" height="100%"></a>-->
                    <!--<a class="swiper-slide"><img src="../images/banner3.jpg" alt="" width="100%" height="100%"></a>-->
                    <!--<a class="swiper-slide"><img src="../images/banner3.jpg" alt="" width="100%" height="100%"></a>-->
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <!--分类-->
        <div class="content clearfix">
            <div class="col-xs-4 text-center">
                <router-link to="/article-details?name=视频教学">
                    <p class="img"><img src="../images/left.png" alt=""></p>
                    <h4>视频教学</h4>
                    <p>Music Teaching</p>
                </router-link>
            </div>
            <div class="col-xs-4 text-center">
                <span @click="toClassList">
                    <p class="img"><img src="../images/mid.png" alt="" width="100%"></p>
                    <h4>主营乐器</h4>
                    <p>Main Instrument</p>
                </span>
            </div>
            <div class="col-xs-4 text-center">
                <router-link to="/article-details?name=乐理乐谱">
                    <p class="img"><img src="../images/right.png" alt="" width="100%"></p>
                    <h4>乐理乐谱</h4>
                    <p>Music theory and Music more</p>
                </router-link>
            </div>
        </div>
        <!--地址-->
        <div class="address">
            <div class="location">
                <div class="store col-xs-4 text-center">
                    <h1>一我们的实体店一</h1>
                    <h3>地址：{{supplier ? supplier.address : '-'}}</h3>
                    <h3>电话：{{supplier ? supplier.tel : '-'}}</h3>
                </div>
                <div class="col-xs-8">
                    <div class="map">
                        <div id="allmap" style="width: 100%;height: 100%;"></div>
                    </div>
                </div>
            </div>

        </div>
        <!--产品分类-->
        <div class="classification">
            <div class="title">
                <div>产品分类</div>
            </div>
            <div class="text-center">
                <ul v-if="menus[0]">
                    <li v-for="classify in menus[0].menuSets">
                        <router-link :to="'/commodity-list?id='+menus[0].id+'&menu_set_id='+classify.id+'&group_name='+classify.group_name">
                            <div class="species">
                                <img :src="url(classify.img.url, '480x275')" v-if="classify.img" width="100%" height="100%">
                                <img src="../images/2-07.jpg" v-else="" width="100%" height="100%">
                            </div>
                            <div class="mask">
                                <span>{{classify.name}}</span>
                            </div>
                        </router-link>
                    </li>
                </ul>

            </div>
        </div>
    </div>
</template>

<script>
    require('../js/swiper/swiper.min.css');
    require('./home.css');
    var Swiper=require('Swiper');
    module.exports={
        data:function () {
            return{
                swiper:null,
                swiperImg:[],
                supplier: null,
                menus:[],
            }
        },
        methods:{
            url:JxSdk.img.getUrl,
            toClassList:function () {
                var h=$('.classification').offset().top;
                $('body,html').animate({scrollTop: h-70});
            }
        },
        mounted:function () {
            var self=this;
            JxSdk.content.picList(0).then(function (data) {
                self.swiperImg=data.list;
                self.$nextTick(function () {
                    self.swiper = new Swiper('.swiper-container', {
                        pagination: '.swiper-pagination',
                        paginationClickable: true,
                        autoplay : 2000,
                    });
                })
            });
            JxSdk.menu.list('2').then(function (data) {
                self.menus=data.menus;
            });

            // 百度地图API功能
            var map = new BMap.Map("allmap");
            var point = new BMap.Point(113.30765,23.120049);
            map.centerAndZoom(point,12);
            var top_left_control = new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM});// 左上角，添加比例尺
            map.addControl(top_left_control);

            JxSdk.supplier.getInfo().then(function(data) {
                self.supplier = data.supplier;

                // 创建地址解析器实例
                var myGeo = new BMap.Geocoder();
                // 将地址解析结果显示在地图上,并调整地图视野
                myGeo.getPoint(data.supplier.address, function(point){
                    if (point) {
                        map.centerAndZoom(point, 16);
                        map.addOverlay(new BMap.Marker(point));
                    }else{
                        alert("地址找不到!");
                    }
                }, "珠海");
            });
        }
    }
</script>